<template>
  <div id="app" class="flexC">
    <div class="head_box font_s32 positionR">
      <div class="head_left flex">
        <div class="flex" @click="listModel(1, '经营性公墓清单')">
          <img src="@/assets/img/zhjg/ic_jingyingxinggongmu.png" class="head_img"/>
          <div class="flexC font_s16 JustifyContentC head_txt_box">
            <p>经营性公墓</p>
            <p class="flex"><span class="head_txt font_s28">{{headData.orgType1}}</span>个</p>
          </div>
        </div>
        <div class="flex" @click="listModel(2, '经营性骨灰堂')">
          <img src="@/assets/img/zhjg/ic_jingyigxingguhuitang.png" class="head_img"/>
          <div class="flexC font_s16 JustifyContentC head_txt_box">
            <p>经营性骨灰堂</p>
            <p class="flex"><span class="head_txt font_s28">{{headData.orgType2}}</span>个</p>
          </div>
        </div>
      </div>
      浦东新区殡葬设施协同监管大数据平台
      <div class="head_right flex">
        <div class="flex" @click="listModel(3, '公益性单位')">
          <img src="@/assets/img/zhjg/ic_gongyixingdanwei.png" class="head_img"/>
          <div class="flexC font_s16 JustifyContentC head_txt_box">
            <p>公益性单位</p>
            <p class="flex"><span class="head_txt font_s28">{{headData.orgType3}}</span>个</p>
          </div>
        </div>
        <div class="flex" @click="listModel(4, '殡仪馆清单')">
          <img src="@/assets/img/zhjg/ic_binyiguan.png" class="head_img"/>
          <div class="flexC font_s16 JustifyContentC head_txt_box">
            <p>殡仪馆</p>
            <p class="flex"><span class="head_txt font_s28">{{headData.orgType4}}</span>个</p>
          </div>
        </div>
      </div>
    </div>
    <div class="nav font_s20 flex JustifyContentSA cursor" style="width: 40%;margin: 0 auto;margin-top: -.8rem;z-index: 1">
      <span :class="{active:isActive===1}" @click="openurl(1)">综合监管</span>
      <span :class="{active:isActive===2}" @click="openurl(2)" style="margin: 0 .3rem">数据海</span>
      <span :class="{active:isActive===3}" @click="wyClick('https://pdbz.intcity.com.cn//screen/html/index.html?datas={%22id%22:%22402880b17471840e0174778eb5a60000%22,%22avatar%22:null,%22code%22:null,%22createId%22:null,%22createTime%22:%222020-09-10%2018:27:55%22,%22gender%22:null,%22modId%22:null,%22modTime%22:%222020-09-11%2015:45:11%22,%22name%22:%22%E5%AE%8B%E5%BF%97%E5%AE%8F%22,%22openId%22:%22o2pRq5N3JtbmLaIbzLgswlhGTdq4%22,%22orgId%22:null,%22phone%22:%2215209156695%22,%22position%22:%22%E7%AE%A1%E7%90%86%E5%91%98%22,%22status%22:%222%22,%22lat%22:null,%22lng%22:null,%22offlineTime%22:%222020-09-14%2010:18:36%22,%22onlineStatus%22:%220%22,%22onlineTime%22:%222020-09-14%2010:18:27%22,%22checkPoints%22:null,%22roles%22:null,%22funs%22:null,%22orgs%22:null,%22pwd%22:%229itlCEkRcAvIebsRwpK0bqUtawlCQ3dZySu8HKengguVGFxsQUNwWg==%22}')">智慧殡葬</span>
    </div>
    <ul class="new_ul">
      <transition-group appear tag="ul">
        <li class="flexC"
            v-for="(item, index) in newList"
            :key="index">
          <p class="close_btn"
             @click="close_btn(item.klyWarnId, index)"> </p>
          <p class="time_p">{{item.createTime}}</p>
          【{{item.orgName}}】客流眼达到预警值{{item.alertValue}}，请关注！
        </li>
      </transition-group>
    </ul>
    <router-view />
    <modal-list v-if="listModal"
                :title=orgTitle
                @hidden="hidden(listModal)">
        <listing :dataList=orgTableList
                 :orgTabletitle = orgTabletitle />
    </modal-list>
  </div>
</template>

<script>
import { queryOrgTypeNum, queryBzfwOrgNoPageList, queryBzfwKlyWarnMessage, shutdownKlyWarnById } from '@/api/home'
import storage from './components/storage.js'
import ModalList from "./components/ModalList"
import Listing from "./views/comprehensive/modal/listing"
export default {
  name: 'App',
  components: { Listing, ModalList},
  data () {
    return {
      headData: {
        orgType1: 0,
        orgType2: 0,
        orgType3: 0,
        orgType4: 0,
        fxdjAnum: 0,
        fxdjBnum: 0,
        fxdjCnum: 0,
        orgLevel0num: 0,
        orgLevel1num: 0,
        orgLevel2num: 0,
        orgLevel3num: 0,
        xydjAnum: 0,
        xydjBnum: 0,
        xydjCnum: 0
      },
      isActive: 1,
      listModal: false,
      orgTitle: '',
      orgTabletitle: [],
      orgTableList: [],
      newList: [],
      timer: ''
    }
  },
  mounted () {
    this.$router.push({ path: '/' })
    this.initPdstats()
    this.newFunc()
    this.timer = setInterval(this.newFunc, 60*1000)
  },
  methods: {
    close_btn(klyWarnId, index) {
      this.newList.splice(index, 1)
      this.closeNewFun(klyWarnId, index)
    },
    listModel (type, title) {
      this.orgTitle = title
      this.listModal = true
      this.orgTabletitle = []
      if (type === 1) {
        this.orgTabletitle = ['序号', '公墓名称', '负责人', '公墓地址', '占地面积（亩）']
      } else if (type === 2) {
        this.orgTabletitle = ['序号', '骨灰堂名称', '负责人', '骨灰堂地址', '占地面积']
      } else if (type === 3) {
        this.orgTabletitle = ['序号', '机构名称', '负责人', '地址', '占地面积（亩）']
      } else if (type === 4) {
        this.orgTabletitle = ['序号', '机构名称', '负责人', '地址', '占地面积（亩）']
      }
      this.listFun(type)
    },
    listFun (type) {
      queryBzfwOrgNoPageList({
        orgType: type
      }).then((response) => {
        if (response.data) {
          this.orgTableList = response.data.response
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    openurl (index) {
      this.isActive = index
      if (index === 1) {
        this.$router.push({ path: '/comprehensive' })
      } else if (index === 2) {
        this.$router.push({ path: '/dataSea' })
      }
    },
    wyClick (url) {
      window.open(url, '_blank') // 新窗口打开外链接
        console.log(url)
    },
    initPdstats () {
      queryOrgTypeNum().then((response) => {
        if (response.data) {
          this.headData = response.data.response
          storage.set('headData', this.headData)
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    newFunc() {
      queryBzfwKlyWarnMessage().then((response) => {
        if (response.data.response) {
          this.newList = response.data.response
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    closeNewFun (klyWarnId, index) {
      shutdownKlyWarnById({
        klyWarnId: klyWarnId
      }).then((response) => {
      }).catch((response) => {
        console.log(response)
      })
    },
    hidden (choose) {
      if (choose === this.listModal) {
        this.listModal = false
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
    }
  }
}
</script>
<style>
  .el-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 199;
  }
</style>
<style lang="scss" scoped>
#app {
  background: #080E1C;
  border: 1px solid #0E0509;
  .new_ul {
    max-height: 23rem;
    position: absolute;
    right: 2rem;
    top: 6rem;
    overflow-y: hidden;
    padding-top: 2rem;
    z-index: 1;
  }
  .new_ul li {
    width: 28.9375rem;
    height: 4rem;
    background: url("assets/img/comprehensive/new_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 2rem;
    color: white;
    padding: 0 2rem;
    padding-top: 2rem;
    box-sizing: border-box;
    .time_p {
      width: 12.75rem;
      height: 2.1875rem;
      line-height: 2.1875rem;
      text-align: center;
      position: absolute;
      top: -.5rem;
      left: 2rem;
      color: white;
      background: url("assets/img/comprehensive/new_time_bg.png") no-repeat;
      background-size: 100% 100%;
    }
    .close_btn {
      background: url("assets/img/comprehensive/ic_guanbi.png") no-repeat;
      background-size: 100% 100%;
      width: 1.3125rem;
      height: 1.3125rem;
      position: absolute;
      right: 1rem;
      top: -.5rem;
    }
  }
  .v-enter,
  .v-leave-to {
    opacity: 0; //设置元素的不透明级别：
    transform: translateX(80px);// 开始和结束位置在Y轴的80px处
  }
  .v-enter-active,
  .v-leave-active {
    transition: all 0.6s ease;// 从Y轴的80px处渐渐移动到上面
  }
  /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  .v-move { transition: all 0.6s ease; }
  .v-leave-active{ position: absolute; }
  .head_box {
    height: 6.375rem;
    line-height: 6.075rem;
    background: url("assets/img/zhjg/head_bg.png") no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #72FFFF;
    text-align: center;
    .head_left {
      position: absolute;
      left: 2%;
      top: 1rem;
    }
    .head_right {
      position: absolute;
      right: 2%;
      top: 1rem;
    }
    .head_img {
      width: 4.625rem;
      height: 4.625rem;
    }
    .head_txt_box {
      line-height: 1.8rem;color: #FFFFFF;
      font-weight: normal;
      margin:0 2rem 0 .5rem;
    }
    .head_txt {
      font-family: Impact;
      font-weight: 400;
      color: #75FBFE;
      margin-right: .4rem;
    }
  }
  .nav {
    span{
      width: 14.25rem;
      height: 3.375rem;
      line-height: 3.375rem;
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #E1FDFF;
      background: url("assets/img/zhjg/ic_shujuhai.png") no-repeat;
      background-size: 100% 100%;
    }
    .active {
      background: url("assets/img/zhjg/ic_zonghejianguan.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
